<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <template>
          <el-select v-model="firstScope"
            clearable
            @change="onChangeFirstScope"
            placeholder="选择主范围">
            <el-option
              v-for="item in firstScopeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="6">
        <el-input placeholder="主范围数据" v-model="firstScopeData" @focus="onGetFirstScopeData" :disabled="disabled_f1"></el-input>
      </el-col>
      <el-col :span="6" v-if="isDisable">
        <template>
          <el-select v-model="secondScope"
            clearable 
            :disabled="disabled_f2"
            @change="onChangeSecondScope"
            placeholder="选择子范围">
            <el-option
              v-for="item in secondScopeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="6" v-if="isDisable">
        <el-input placeholder="子范围数据" v-model="secondScopeData" :disabled="disabled_f3" @focus="onGetSecondScopeData"></el-input>
      </el-col>

      <el-col :span="24" class="my">
        <span v-if="firstScope=='project'">
          <el-tag
            v-for="tag in tags"
            :key="tag.area_name"
            type="success">
            {{tag.area_name}}
          </el-tag>
        </span>
        <span v-if="firstScope=='dept'">
          <el-tag
            v-for="tag in tags"
            :key="tag.label"
            type="success">
            {{tag.label}}
          </el-tag>
        </span>
        <span v-if="firstScope=='person'">
          <el-tag
            v-for="tag in tags"
            :key="tag.user_name"
            :title="'联系电话：'+tag.phone"
            type="success">
            {{tag.user_name}}
          </el-tag>
        </span>
        <span v-if="dataTypeFirst=='edit'">
          <el-tag
            v-for="tag in tagsEdit"
            :key="tag.name"
            type="success">
            {{tag.name}}
          </el-tag>    
        </span>
      </el-col>

      <el-col :span="24" class="my">
        <span v-if="secondScopeData!=''">
          <el-tag
            v-for="tag in role_tags"
            :key="tag.role_name">
            {{tag.role_name}}
          </el-tag>
        </span>
        <span v-if="dataTypeSecond=='edit'">
          <el-tag
            v-for="tag in role_tagsEdit"
            :key="tag.name">
            {{tag.name}}
          </el-tag>    
        </span>
      </el-col>
    </el-row>
    
    <!-- 选择项目(小区) start -->
    <el-dialog title="选择项目(小区)" class="myRoleDialog" :visible.sync="newAreaDialogVisible">
      <el-row :gutter="10">
        <el-col :span="20">
          <el-input placeholder="输入关键词" v-model="kw_area" autofocus></el-input>
        </el-col>
        <el-col :span="4" class="myTextAlignRight">
          <el-button type="primary" class="myBgGreen" @click="onSearch">查询</el-button>
        </el-col>
      </el-row>
      <div class="myPaddingTop_10px">
        <el-tree
          key="areaDlg" 
          class="myOV_y_400px"
          ref="areaDlg"
          v-loading="areaDlgListLoading"
          :data="areaDlgList"
          :props="areaDlgProps"
          node-key="area_id"
          show-checkbox><!-- :filter-node-method="filterNode" -->
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="newAreaDialogVisible = false">取 消</el-button>
        <el-button @click="handleAreaClick" type="primary" class="myBgGreen">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 选择项目(小区) end -->
    
    <!-- 选择部门 start -->
    <el-dialog title="选择部门" class="myRoleDialog" :visible.sync="newDeptDialogVisible">
      <el-row :gutter="10">
        <el-col :span="20">
          <el-input placeholder="输入关键词" v-model="kw_dept" autofocus></el-input>
        </el-col>
        <el-col :span="4" class="myTextAlignRight">
          <el-button type="primary" class="myBgGreen" @click="onSearchDept">查询</el-button>
        </el-col>
      </el-row>
      <div class="myPaddingTop_10px">
        <el-tree 
          key="deptDlg"
          class="myOV_y_400px"
          ref="deptDlg"
          v-loading="deptLoading"
          :data="deptDlgList"
          :props="deptDlgProps"
          node-key="value"
          :default-expand-all=true
          show-checkbox>
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="newDeptDialogVisible = false">取 消</el-button>
        <el-button @click="handleDeptClick" type="primary" class="myBgGreen">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 选择部门 end -->

    <!-- 选择员工 start -->
    <el-dialog title="选择员工" class="myRoleDialog" :visible.sync="newPersonDialogVisible">
      <el-row :gutter="10">
        <el-col :span="20">
          <el-input placeholder="输入关键词" v-model="kw_person" autofocus></el-input>
        </el-col>
        <el-col :span="4" class="myTextAlignRight">
          <el-button type="primary" class="myBgGreen" @click="onSearchPerson">查询</el-button>
        </el-col>
      </el-row>
      <div class="myPaddingTop_10px">
        <el-tree 
          key="personDlg"
          class="myOV_y_400px"
          ref="personDlg"
          v-loading="personLoading"
          :data="personDlgList"
          :props="personDlgProps"
          node-key="staff_id"
          show-checkbox>
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="newPersonDialogVisible = false">取 消</el-button>
        <el-button @click="handlePersonClick" type="primary" class="myBgGreen">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 选择员工 end -->

    <!-- 选择角色职务 start -->
    <el-dialog title="选择职务" class="myRoleDialog" :visible.sync="newRoleDialogVisible">
      <el-row :gutter="10">
        <el-col :span="20">
          <el-input placeholder="输入关键词" v-model="kw_role" autofocus></el-input>
        </el-col>
        <el-col :span="4" class="myTextAlignRight">
          <el-button type="primary" class="myBgGreen" @click="onSearchRole">查询</el-button>
        </el-col>
      </el-row>
      <div class="myPaddingTop_10px">
        <el-tree 
          key="roleDlg"
          class="myOV_y_400px"
          ref="roleDlg"
          v-loading="roleLoading"
          :data="roleDlgList"
          :props="roleDlgProps"
          node-key="role_id"
          show-checkbox>
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="newRoleDialogVisible = false">取 消</el-button>
        <el-button @click="handleRoleClick" type="primary" class="myBgGreen">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 选择角色职务 end -->

  </div>
</template>

<style scoped>  
  .myOV_y_400px{
    border:1px solid #f2f2f2;
    box-sizing: border-box;
    min-height: 200px;
    max-height: 400px;
    overflow-y: scroll; 
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
</style>

<script>
  import { getAreaList } from '@/api/area';
  import { getDeptInfo } from '@/api/dept';
  import { getStaffList } from '@/api/staff';
  import { getRoleList } from '@/api/role';
  export default {
    data(){
      return{
        firstScope:"",
        firstScopeData:"",
        disabled_f1:true,
        disabled_f2:true,
        disabled_f3:true,
        firstScopeList:[
          {value:"project",label:"项目(小区)"},
          {value:"dept",label:"部门"},
          {value:"person",label:"员工"}
        ],
        secondScope:"",
        secondScopeData:"",
        secondScopeList:[
          {value:"all",label:"所有"},
          {value:"duty",label:"职务"}
        ],
        isDisable:false,
        newAreaDialogVisible:false,
        kw_area:"",
        areaDlgListLoading:false,
        areaDlgList:[],
        areaDlgProps: {
          children: 'children',
          label: 'area_name'
        },
        areaSelf:{area_id:"-1",area_name:"本小区"},
        areaIdList:"",
        areaNameList:"",
        deptDlgList:[],
        newDeptDialogVisible:false,
        deptLoading:false,
        deptDlgProps: {
          children: 'children',
          label: 'label'
        },
        kw_dept:"",
        deptIdList:"",
        deptNameList:"",
        kw_person:"",
        personLoading:false,
        personDlgList:[],
        newPersonDialogVisible:false,
        personDlgProps: {
          children: 'children',
          label: 'user_name'
        },
        personIdList:"",
        personNameList:"",
        roleDlgList:[],
        newRoleDialogVisible:false,
        kw_role:"",
        roleLoading:false,
        roleDlgProps: {
          children: 'children',
          label: 'role_name'
        },
        roleIdList:"",
        roleNameList:"",
        tags:[],
        role_tags:[],
        returnData:{
          "scope":{
            "type":"",
            "item":[]
          },
          "subscope":{
            "type":"",
            "item":[]
          }
        },
        dataTypeFirst:"",
        dataTypeSecond:"",
        tagsEdit:[],
        role_tagsEdit:[],
        
      }
    },
    components:{
      
    },
    props:{
      datamsg:{
        type:Object,
        default:null
      }
    },
    created(){
      
    },
    mounted(){
      let vm=this;
      if(vm.datamsg==null){
        return;
      }
      if(vm.datamsg.scope){
        vm.dataTypeFirst="edit";
        vm.dataTypeSecond="edit";

        vm.returnData=vm.datamsg;

        vm.firstScope=vm.datamsg.scope.type;
        let ids="",names="";
        for (var i = 0; i < vm.datamsg.scope.item.length ; i++) {
          ids+=vm.datamsg.scope.item[i].id+",";
          names+=vm.datamsg.scope.item[i].name+",";
        }
        vm.firstScopeData=names.substring(0,names.length-1);
        vm.tagsEdit=vm.datamsg.scope.item;
        

        vm.isDisable=false;
        vm.disabled_f3=false;

        vm.secondScope=vm.datamsg.subscope.type;
        let ids2="",names2="";
        for (var i = 0; i < vm.datamsg.subscope.item.length ; i++) {
          ids2+=vm.datamsg.subscope.item[i].id+",";
          names2+=vm.datamsg.subscope.item[i].name+",";
        }
        vm.secondScopeData=names2.substring(0,names2.length-1);
        vm.role_tagsEdit=vm.datamsg.subscope.item;
      }
      
    },
    watch: {
      firstScope(val){//第一个控件数据监听
        let vm=this;

        if(val!="" && val!="person"){
          vm.isDisable=true;
        }else{
          vm.isDisable=false;
        }

        if(val!=""){
          vm.disabled_f1=false;
        }else{
          vm.disabled_f1=true;
          vm.areaIdList="";

          vm.tagsEdit={};
          vm.role_tagsEdit={};
          vm.$emit("getChildData",{});//发射数据
        }
      },
      firstScopeData(val){//第二个控件数据监听
        let vm=this;
        
        if(val!=""){
          vm.disabled_f2=false;

          if(vm.firstScope=="person"){
            vm.$emit("getChildData",vm.returnData);//发射数据
          }else{
            vm.$emit("getChildData",{});//发射数据
          }

        }else{
          vm.disabled_f2=true;
          
          vm.$emit("getChildData",{});//发射数据
        }
      },
      secondScope(val){//第三个控件数据监听
        let vm=this;
        if(val!="" && val=="all"){
          vm.returnData.subscope.type=vm.secondScope;
          vm.disabled_f3=true;
          vm.$emit("getChildData",vm.returnData);//发射数据
          return;
        }else{
          vm.disabled_f3=false;
          vm.$emit("getChildData",{});//发射数据
        }
      },
      secondScopeData(val){//第四个控件数据监听
        let vm=this;
        if(val!="" || vm.secondScope=="all"){
          vm.$emit("getChildData",vm.returnData);//发射数据
        }else{
          vm.$emit("getChildData",{});//发射数据
        }
      }
    },
    methods:{
      onChangeFirstScope(val){//主范围选择内容时【项目小区/部门/员工】
        let vm=this;
        vm.firstScopeData="";
        vm.secondScope="";
        vm.secondScopeData="";
        vm.tags={};
        vm.role_tags={};
        vm.tagsEdit={};
        vm.role_tagsEdit={};
        if(val!="" && val!="person"){
          vm.isDisable=true;
          vm.disabled_f3=true;
        }else{
          vm.isDisable=false;
        }
      },
      onChangeSecondScope(val){//子范围
        let vm=this;
        if(val!="" && val=="duty"){
          vm.disabled_f3=false;
        }else{
          vm.disabled_f3=true;
          vm.secondScopeData="";
          vm.role_tagsEdit={};  
          vm.returnData.subscope.item=[];        
        }
      },
      onGetFirstScopeData(){//主范围数据框接收焦点时判断执行内容
        let vm=this;
        if(vm.firstScope=="project"){//项目【小区】
          vm.onGetAreaList();
          vm.newAreaDialogVisible=true;
        }
        if(vm.firstScope=="dept"){//部门
          vm.onGetDeptList();
          vm.newDeptDialogVisible=true;
        }
        if(vm.firstScope=="person"){//员工
          vm.onGetPersonList();
          vm.newPersonDialogVisible=true;
        }
      },
      onGetAreaList() {//拉取小区
        let vm = this;
        let params = {
          kw: vm.kw_area,
          page_num: 1,
          page_size: 10000
        }; 
        vm.areaDlgListLoading=true;
        getAreaList(params)
        .then(response => {
          let res = response.data.rows;
          res.splice(0,0,vm.areaSelf);//添加第一项【本小区】
          vm.areaDlgList = res;
          vm.areaDlgListLoading=false;
        }).catch(error => {
          vm.areaDlgListLoading=false;
        })
      },
      onGetDeptList(){//拉取部门
        let vm=this;
        vm.deptLoading=true;
        let params={
          kw:vm.kw_dept
        }
        getDeptInfo(params).then(response => {
          let res = response.data;
          vm.deptDlgList = res;
          vm.deptLoading = false;
        }).catch(error => {
          vm.deptLoading = false;
        });
      },
      onGetRoleList(){//拉取角色职务
        let vm = this;
        vm.roleLoading = true;
        let params = {
          kw: vm.kw_role,
          page_num: 1,
          page_size: 10000
        }; 
        getRoleList(params).then(response => {
          let res = response.data;
          vm.roleDlgList = res.rows;
          vm.roleLoading = false;
        }).catch(error => {
          vm.roleLoading = false;
        })
      },
      onGetPersonList(){//拉取员工
        let vm=this;
        let params = {
          page_num: 1,
          page_size: 50,
          kw: vm.kw_person
        };
        vm.personLoading=true;
        getStaffList(params).then(response => {
          let res = response.data;
          vm.personDlgList = res.rows;
          vm.personLoading=false;
        }).catch(error => {
          vm.personLoading=false;
        })
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.area_name.indexOf(value) !== -1;
      },
      onSearch(){//小区搜索按钮
        this.onGetAreaList();
      },
      handleAreaClick(){//确认小区按钮
        let vm=this;
        vm.dataTypeFirst="update";
        vm.dataTypeSecond="update";
        vm.secondScope="";
        vm.secondScopeData="";
        let ids="",names="";

        vm.returnData.scope.item=[];//初始化主范围值
        vm.returnData.scope.type=vm.firstScope;//主范围类型设定

        let area = vm.$refs.areaDlg.getCheckedNodes();
        vm.tags=area;

        if(area.length>0){
          for (var i = 0; i < area.length ; i++) {
            ids+=area[i].area_id+",";
            names+=area[i].area_name+",";

            vm.returnData.scope.item.push({"id":area[i].area_id,"name":area[i].area_name});//主范围值设定
          }
          vm.areaIdList=ids.substring(0,ids.length-1);
          vm.firstScopeData=names.substring(0,names.length-1);
        }else{
          vm.areaIdList="";
          vm.firstScopeData="";

          vm.disabled_f3=true;
        }
        //console.log(vm.areaIdList,vm.firstScopeData);//返回的小区id和name

        
        vm.newAreaDialogVisible=false;
      },
      onSearchDept(){//部门搜索
        this.onGetDeptList();
      },
      handleDeptClick(){//确认部门
        let vm=this;
        vm.dataTypeFirst="update";
        vm.dataTypeSecond="update";
        vm.secondScope="";
        vm.secondScopeData="";
        let ids="",names="";

        vm.returnData.scope.item=[];//初始化主范围值
        vm.returnData.scope.type=vm.firstScope;//主范围类型设定

        let dept = vm.$refs.deptDlg.getCheckedNodes();
        vm.tags=dept;

        if(dept.length>0){
          for (var i = 0; i < dept.length ; i++) {
            ids+=dept[i].value+",";
            names+=dept[i].label+",";

            vm.returnData.scope.item.push({"id":dept[i].value,"name":dept[i].label});//主范围值设定
          }
          vm.deptIdList=ids.substring(0,ids.length-1);
          vm.firstScopeData=names.substring(0,names.length-1);
        }else{
          vm.areaIdList="";
          vm.firstScopeData="";
        }
        //console.log(vm.deptIdList,vm.firstScopeData);//返回的部门id和name

        vm.newDeptDialogVisible=false;
      },
      onSearchPerson(){//员工查询
        this.onGetPersonList();
      },
      handlePersonClick(){//确认员工
        let vm=this;
        vm.dataTypeFirst="update";
        vm.secondScope="";
        vm.secondScopeData="";
        let ids="",names="";

        vm.returnData.scope.item=[];//初始化主范围值
        vm.returnData.scope.type=vm.firstScope;//主范围类型设定

        let person = vm.$refs.personDlg.getCheckedNodes();
        vm.tags=person;

        if(person.length>0){
          for (var i = 0; i < person.length ; i++) {
            ids+=person[i].staff_id+",";
            names+=person[i].user_name+",";

            vm.returnData.scope.item.push({"id":person[i].staff_id,"name":person[i].user_name});//主范围值设定
          }
          vm.personIdList=ids.substring(0,ids.length-1);
          vm.firstScopeData=names.substring(0,names.length-1);
        }else{
          vm.personIdList="";
          vm.firstScopeData="";
        }
        //console.log(vm.personIdList,vm.firstScopeData);//返回的员工id和name

        vm.newPersonDialogVisible=false;
      },
      onSearchRole(){//职务搜索
        this.onGetRoleList();
      },
      onGetSecondScopeData(){//职务框获得焦点时
        let vm=this;
        if(vm.firstScope=="project"){//项目【小区】
          console.log("小区")
          vm.onGetRoleList();
          vm.newRoleDialogVisible=true;
        }
        if(vm.firstScope=="dept"){//部门
          console.log("部门")
          vm.onGetRoleList();
          vm.newRoleDialogVisible=true;
        }
      },
      handleRoleClick(){//职务确认
        let vm=this;
        vm.dataTypeSecond="update";
        let ids="",names="";

        vm.returnData.subscope.item=[];//初始化子范围值
        vm.returnData.subscope.type=vm.secondScope;//子范围类型设定

        let role = vm.$refs.roleDlg.getCheckedNodes();
        vm.role_tags=role;

        if(role.length>0){
          for (var i = 0; i < role.length ; i++) {
            ids+=role[i].role_id+",";
            names+=role[i].role_name+",";

            vm.returnData.subscope.item.push({"id":role[i].role_id,"name":role[i].role_name});//子范围值设定
          }
          vm.roleIdList=ids.substring(0,ids.length-1);
          vm.secondScopeData=names.substring(0,names.length-1);

        }else{
          vm.roleIdList="";
          vm.secondScopeData="";
        }
        //console.log(vm.roleIdList,vm.secondScopeData);//返回的职务id和name

        vm.newRoleDialogVisible=false;
      }


    }
  }
</script>



